<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script type="text/javascript" src="../../js/jquery-2.1.1.min.js"></script>
    <style>
        #content{
            width:500px;
            height:500px;
        }
    </style>
</head>
<body>
<div id="content" style="background: grey">
    乔布斯掌权时代的iPhone以精湛的做工受到广泛的关注，也受到了大量的果粉追捧。iPhone4S的黄金尺寸设计，再到iPhone5s的巅峰状态，
    但是iPhone6的横空出世似乎打破了苹果公司在工艺方面的追求。虽然iPhone6及其iPhone6 Plus的销量比前几代产品都要高
    （原因受安卓大屏冲击的影响，果粉对大屏手机的欲望愈加的浓烈），但是收到广泛吐槽也是最多的。大白条，尤其是突出的摄像头，
    乔布斯知道估计都能从坟里跳出来！ 不喜欢的iPhone6的果粉可以等等了，iPhone7马上就要来临了，
    这是国外设计师设计出的一部iPhone7的概念图，这部iPhone7不仅做工精湛， 而且消除了打白条和涉嫌头突出问题，
    更重要的是采用了iPhone4的双面玻璃设计，边角做出了圆润设计，不仅时尚，而且商务气息十足，
    适合追求时尚的年轻人和商务人士使用，受用人群更广泛了。
</div>
<button id="btn">选择</button>
</body>
<script type="text/javascript">
    /*
     *IE9以下支持：document.selection 　　
     *IE9、Firefox、Safari、Chrome和Opera支持：window.getSelection()
    */
    $(function(){
        $("#btn").mouseup(function(){
            if(window.getSelection) {
                var textObj = document.getElementById("content");
                var selectedText = getSelectedText(textObj).toString();//选取文本。
                selectedText = "<span style='background:red'>"+selectedText+"</span>";//给文字加红色
                var start = window.document.getSelection().anchorOffset;//获取开始位置 如果内部有节点，就会从节点位置读取，
                var end = window.document.getSelection().focusOffset;//获取末尾位置

                var tempStr1,tempStr2;
                if(start>end){//从后面向前选择时，开始位置会变成后面。
                    tempStr1 = textObj.innerHTML.substring(0,end);//截取前面
                    tempStr2 = textObj.innerHTML.substring(start);//截取后面文本
                }else{
                    tempStr1 = textObj.innerHTML.substring(0,start);//截取前面
                    tempStr2 = textObj.innerHTML.substring(end);//截取后面文本
                }
                document.getElementById("content").innerHTML = tempStr1 + selectedText + tempStr2 ;//重新赋给div
            }
        });

        function getSelectedText(obj) {
            var txt = "";
            if (window.getSelection) {
                txt = window.getSelection();
            } else if (window.document.getSelection) {
                txt = window.document.getSelection();
            } else if (window.document.selection) {
                txt = window.document.selection.createRange().text;
            }
            return txt;
        };
    });
</script>
</html>